<!--
/**
 * author: vformAdmin
 * email: vdpadmin@163.com
 * website: https://www.vform666.com
 * date: 2021.08.18
 * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
 */
-->

<template>
  <el-col v-bind="layoutProps">
    <div
      class="field-wrapper"
      :class="{
        'design-time-bottom-margin': designer.designStatus,
        selected: designer.selectedId === field.id,
        renderForm: !designer.designStatus,
      }"
      @click.stop="selectField(field.id)"
    >
      <el-form-item
        v-if="extraShow"
        :label="label"
        :label-width="labelWidth + 'px'"
        :title="field.options.labelTooltip"
        :rules="rules"
        :prop="field.id"
        :class="[
          labelAlign,
          customClass,
          {
            required: field.options.required,
            _hidden: field.options.hidden,
          },
        ]"
      >
        <div
          slot="label"
          class="custom-label"
          :class="{
            _required: !designer.previewStatus && field.options.required,
          }"
        >
          <template v-if="!!field.options.labelIconClass">
            <template v-if="field.options.labelIconPosition === 'front'">
              <template v-if="!!field.options.labelTooltip">
                <el-tooltip
                  :content="field.options.labelTooltip"
                  effect="light"
                >
                  <i :class="field.options.labelIconClass" />
                </el-tooltip>
                {{ label }}
              </template>
              <template v-else>
                <i :class="field.options.labelIconClass" />
                {{ label }}
              </template>
            </template>
            <template v-else-if="field.options.labelIconPosition === 'rear'">
              <template v-if="!!field.options.labelTooltip">
                {{ label }}
                <el-tooltip
                  :content="field.options.labelTooltip"
                  effect="light"
                >
                  <i :class="field.options.labelIconClass" />
                </el-tooltip>
              </template>
              <template v-else>
                {{ label }}
                <i :class="field.options.labelIconClass" />
              </template>
            </template>
          </template>
          <template v-else> {{ label }}</template>
        </div>
        <slot />
      </el-form-item>
      <template v-if="designer.designStatus">
        <div v-if="designer.selectedId === field.id" class="field-action">
          <i
            v-if="parentId"
            class="el-icon-back"
            title="选中父组件"
            @click.stop="selectField(parentId)"
          />
          <i
            class="el-icon-copy-document"
            title="复制"
            @click.stop="cloneUnit(field)"
          />
          <i
            class="el-icon-delete"
            title="删除"
            @click.stop="removeUnit(field.id)"
          />
        </div>

        <div
          v-if="designer.selectedId === field.id"
          class="drag-handler background-opacity"
        >
          <i class="el-icon-rank" title="拖动" />
          <i>{{ field.title }}</i>
          <i v-if="field.options.hidden === true" class="iconfont icon-hide" />
        </div>
      </template>
    </div>
  </el-col>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
export default {
  name: "form-item-wrapper",
  props: {
    field: Object,
    parentId: String,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,

    designState: {
      type: Boolean,
      default: false,
    },

    rules: Array,
  },
  // inject: ["formConfig"],
  computed: {
    selected() {
      return (
        this.designer.designStatus && this.field.id === this.designer.selectedId
      );
    },
    extraShow() {
      const renderShow = Object.prototype.hasOwnProperty.call(
        this.field.options,
        "renderShow"
      )
        ? this.field.options.renderShow &&
          !this.designer.designStatus &&
          !this.designer.previewStatus
        : true;

      const previewShow = Object.prototype.hasOwnProperty.call(
        this.field.options,
        "perviewShow"
      )
        ? this.field.options.perviewShow && this.designer.previewStatus
        : true;
      // if (this.field.type === "button") {
      //   console.groupCollapsed("====extraShow==========");
      //   console.log("designStatus", this.designer.designStatus);
      //   console.log(
      //     "renderShow",
      //     Object.prototype.hasOwnProperty.call(
      //       this.field.options,
      //       "renderShow"
      //     ),
      //     this.field.options.renderShow,
      //     !this.designer.designStatus,
      //     !this.designer.previewStatus,
      //     "=>",
      //     renderShow
      //   );
      //   console.log(
      //     "perviewShow",
      //     Object.prototype.hasOwnProperty.call(
      //       this.field.options,
      //       "perviewShow"
      //     ),
      //     this.field.options.perviewShow,
      //     this.designer.previewStatus,
      //     "=>",
      //     previewShow
      //   );
      //   console.log(
      //     "out =>",
      //     this.designer.designStatus || renderShow || previewShow
      //   );
      //   console.groupEnd();
      // }
      return this.designer.designStatus || renderShow || previewShow;
    },

    label() {
      if (this.field.options.labelHidden) {
        return "";
      }

      return this.field.options.label;
    },
    formConfig() {
      return this.designer.formConfig;
    },
    labelWidth() {
      // console.log(this.field.options);
      if (this.field.options.labelHidden) {
        return this.designer.designState ? 5 : 0;
      }

      if (this.field.options.labelWidth) {
        return this.field.options.labelWidth;
      }

      if (this.designer.designStatus) {
        return this.designer.formConfig.labelWidth;
      } else {
        return this.formConfig.labelWidth;
      }
    },

    labelAlign() {
      if (this.field.options.labelAlign) {
        return this.field.options.labelAlign;
      }

      if (this.designer.designStatus) {
        return this.designer.formConfig.labelAlign || "label-left-align";
      } else {
        return this.formConfig.labelAlign || "label-left-align";
      }
    },

    customClass() {
      return this.field.options.customClass
        ? this.field.options.customClass.join(" ")
        : "";
    },
    layoutProps() {
      return {
        span: this.field.options.span || 12,
        offset: this.field.options.offset || 0,
        push: this.field.options.push || 0,
        pull: this.field.options.pull || 0,
      };
    },
  },
  methods: {
    // 选中表单单元
    selectField(field) {
      // console.log("selectField", this.designer.designStatus);
      if (this.designer.designStatus) {
        this.designer.setSelected(field);
        // this.designer.emitEvent("field-selected", this.parentWidget); //发送选中组件的父组件对象
      }
    },
    // 克隆表单单元
    cloneUnit(unit) {
      // console.log(unit);
      if (this.parentList) {
        const newCon = this.designer.copyNewFieldUnit(unit);
        // console.log(newCon);
        newCon.options = { ...unit.options, name: newCon.options.name };
        this.designer.addFieldLib(newCon);
        this.parentList.splice(this.indexOfParentList + 1, 0, newCon.id);
        this.designer.setSelected(newCon.id);
        this.designer.emitHistoryChange();
      }
    },
    // 移除该单元
    removeUnit(id) {
      if (this.parentList) {
        this.designer.removeFieldLib(id);
        this.parentList.splice(this.indexOfParentList, 1);
        let nextSelect =
          this.parentList.length > this.indexOfParentList
            ? this.indexOfParentList
            : this.indexOfParentList - 1;
        if (this.parentList.length > 0) {
          nextSelect =
            this.parentList.length > this.indexOfParentList
              ? this.indexOfParentList
              : this.indexOfParentList - 1;
        } else nextSelect = this.parentId;

        this.designer.setSelected(
          nextSelect
            ? typeof nextSelect === "string"
              ? nextSelect
              : nextSelect.id
            : null
        );
        this.designer.emitHistoryChange();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//

.design-time-bottom-margin {
  margin-bottom: 5px;
}
.field-wrapper {
  position: relative;
  // overflow: hidden;
  .field-action {
    position: absolute;
    //bottom: -24px;
    bottom: 0;
    right: -2px;
    height: 22px;
    line-height: 22px;
    background: $--color-primary;
    z-index: 9;

    i {
      font-size: 14px;
      color: #fff;
      margin: 0 5px;
      cursor: pointer;
    }
  }

  .drag-handler {
    position: absolute;
    top: 0;
    //bottom: -22px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
    left: -1px;
    height: 20px;
    line-height: 20px;
    background: $--color-primary;
    z-index: 9;
    opacity: 0;

    i {
      font-size: 12px;
      font-style: normal;
      color: #fff;
      margin: 4px;
      cursor: move;
    }

    // &:hover {
    //   opacity: 1;
    // }
  }
  &:hover {
    .drag-handler {
      opacity: 1;
    }
  }
}

.el-form-item._hidden {
  visibility: hidden;
}
.el-form-item {
  //margin-bottom: 0 !important;
  //margin-bottom: 6px;

  //margin-top: 2px;
  position: relative;

  ::v-deep .el-form-item__label {
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 0;
  }

  // ::v-deep {
  //   .el-form-item__content {
  //     //position: unset;  /* TODO: 忘了这个样式设置是为了解决什么问题？？ */
  //   }
  // }

  div.custom-label {
    // flex: 1;
    display: inline-block;
    word-break: break-all;
    white-space: pre-wrap;
    white-space: pre;
    user-select: none;
    color: #909399;
    // line-height: 1.4;
    // height: 100%;
    &._required::before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
    i {
      margin: 0 3px;
    }
  }
  ::v-deep {
    /* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
    .hide-spin-button input::-webkit-outer-spin-button,
    .hide-spin-button input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
    }

    /* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
    .hide-spin-button input[type="number"] {
      -moz-appearance: textfield;
    }
  }

  ::v-deep {
    .el-form-item__label::before {
      // content: "*";
      display: none;
      // float: left;
      // color: #f56c6c;
      // margin-right: 4px;
    }
  }
}
.static-content-item {
  min-height: 20px;
  display: flex; /* 垂直居中 */
  align-items: center; /* 垂直居中 */

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}
::v-deep {
  .renderForm {
    .el-form-item {
      margin-bottom: 18px;
    }
  }
}

.field-wrapper.selected {
  outline: 2px solid $--color-primary;
}

::v-deep .label-left-align .el-form-item__label {
  text-align: left;
}

::v-deep .label-center-align .el-form-item__label {
  text-align: center;
}

::v-deep .label-right-align .el-form-item__label {
  text-align: right;
}
</style>
